<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>通过js代码增加按钮</title>
</head>

<body>
  <div id="app"></div>
  <script>
    /**
     传统的DOM编程中，元素都是‘重量级对象’
     携带了大量的属性和函数，其实大多数可能都没有用到，但是仍然存在
    **/
    /**占用内存高，操作速度慢**/

    //1.凭空创建一个button元素
    let child = document.createElement("button");
    child.title = "提交登录信息"
    child.className = "dl"
    child.innerHTML = "登 录"

    console.dir(child)

    //2.在页面中找到父元素
    let parent = document.getElementById("app");
    //3.将创建的button元素 挂载到父元素上
    parent.appendChild(child);
  </script>
</body>

</html>